<template>
  <el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="this.$store.state.menus.editableTabsValue"
      :router="true"
  >
<!--    :default-active="$route.path" 高亮根据$route.path来设置，但是:default-active会去对比每个menu的index值
，即如果$route.path等于某个菜单项的index，则该菜单项高亮-->
      <el-menu-item index="/index" @click="addTabs({title:'首页',name:'/index'})">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-submenu :index="menu.name" v-for="menu in menuList">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{menu.title}}</span>
        </template>
          <el-menu-item :index="item.name" :route="{path:item.path}" v-for="item in menu.children" @click="addTabs(item)">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>
          </el-menu-item>
      </el-submenu>

  </el-menu>
</template>

<script>
export default {
  name: "asider",

  data(){
    return{

    }
  },
  //计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
  computed:{
    //不同用户对应不同菜单栏
    menuList: {
      get() {
        return this.$store.state.menus.menuList;
      }
    }
  },
  methods:{
    addTabs(item){
      this.$store.commit("addTab",item)
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo {
  text-align: left;
  height: 100vh;
}
.a{

}
</style>